<template>
    <el-dialog width="35%" v-model="dialogFormVisible" :title="dialogFormTitle" :before-close="handleClose" draggable
        overflow center align-center>
        <el-form ref="formData" :model="formdata">
            <el-form-item label="活动名称" label-width="27%">
                <el-input v-model="formdata.activityName" autocomplete="off" style="width: 70%" />
            </el-form-item>
            <el-form-item label="活动图片" label-width="27%">
                <el-upload class="avatar-uploader" name="imageFile" :action="action" :show-file-list="false"
                    :on-success="handleImageSuccess" :before-upload="beforeAvatarUpload">
                    <el-image v-if="formdata.image" :src="formdata.image" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="活动类别" label-width="27%">
                <el-select v-model="activityTypeId" placeholder="请选择活动类别" @change="handleType" style="width: 70%">
                    <el-option v-for="item in typesData" :key="item.id" :label="item.type" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="活动日期" label-width="27%">
                <el-date-picker v-model="formdata.activityDate" type="date" placeholder="选择活动日期"
                    :disabledDate="hiredateDisabledDate" :shortcuts="hiredateShortcuts" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" style="width: 70%" />
            </el-form-item>
            <el-form-item label="开始时间" label-width="27%">
                <el-time-picker v-model="formdata.startTime" placeholder="请选择活动开始时间" format="HH:mm:ss"
                    value-format="HH:mm:ss" style="width: 70%" />
            </el-form-item>
            <el-form-item label="结束时间" label-width="27%">
                <el-time-picker v-model="formdata.endTime" placeholder="请选择活动结束时间" format="HH:mm:ss"
                    value-format="HH:mm:ss" style="width: 70%" />
            </el-form-item>
            <el-form-item label="活动地点" label-width="27%">
                <el-input v-model="formdata.activityAddress" autocomplete="off" style="width: 70%" />
            </el-form-item>
            <el-form-item label="负责人" label-width="27%">
                <el-select v-model="directorId" placeholder="请选择活动负责人" @change="handleDirector" style="width: 70%">
                    <el-option v-for="item in directorsData" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="人员上限" label-width="27%">
                <el-input v-model="formdata.limitNum" autocomplete="off" style="width: 70%" />
            </el-form-item>
            <el-form-item label="活动积分" label-width="27%">
                <el-input v-model="formdata.activityPoint" autocomplete="off" style="width: 70%" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="canelDialog">取消</el-button>
                <el-button type="primary" @click="toSave" :icon="Promotion"> 保存 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { Promotion, Plus } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import { useActivityStore } from "../../../stores/activity"
const activityStore = useActivityStore()
const { dialogFormTitle, dialogFormVisible, directorsData, typesData, formdata } = storeToRefs(activityStore)

const activityTypeId = ref()
const directorId = ref()
let isDefault = true
watchEffect(() => {
    if (isDefault) {
        // console.log(activityStore.formdata);
        activityTypeId.value = activityStore.formdateCopy.activityType.id
        directorId.value = activityStore.formdateCopy.director.id
        // console.log(activityTypeId.value);
    }
    else {
        console.log(activityTypeId.value)
        console.log(directorId.value)
    }
})

const toSave = () => {
    activityStore.formdata.activityTypeId = activityTypeId.value
    activityStore.formdata.dId = directorId.value
    console.log(activityStore.formdata);
    activityStore.save()
}
const handleType = () => {
    activityStore.loadType()
    isDefault = false
}
const handleDirector = () => {
    activityStore.loadDirector()
}

const action = 'http://127.0.0.1:8083/upload/image'
const handleImageSuccess = (res) => {
    console.log(res)
    activityStore.formdata.image = res.result
}

const beforeAvatarUpload = (res) => {
    console.log(res);
}
// const handleAvatarSuccess = (response, uploadFile) => {
//     imageUrl.value = URL.createObjectURL(uploadFile.raw!)
// }

const canelDialog = () => {
    activityStore.dialogFormVisible = false
    activityStore.formdata = {}
    activityStore.formdateCopy.activityType = {}
    activityStore.formdateCopy.director = {}
}
const handleClose = () => {
    canelDialog()
    isDefault = true
}

//定义日历的禁用日期计算属性
const hiredateDisabledDate = (time) => time.getTime() < new Date().getTime();
//定义日期的快捷键 快速选择
const hiredateShortcuts = [
    {
        text: '明天',
        value: () => {
            let now = new Date().getTime();
            now += 86400000;
            return new Date().setTime(now);
        }
    }, {
        text: '后天',
        value: () => {
            let now = new Date().getTime();
            now += 86400000 * 2;
            return new Date().setTime(now);
        }
    }, {
        text: '7天后',
        value: () => {
            let now = new Date().getTime();
            now += 86400000 * 7;
            return new Date().setTime(now);
        }
    }
]
</script>
<style scoped>
.avatar-uploader {
    width: 70%;
    /* height: 70%; */
    display: block;
}

.avatar {
    width: 100%;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>